<script setup>
import {ArrowDown, Expand, Fold, SwitchButton} from "@element-plus/icons-vue";
import {computed, ref} from "vue";
import store from "@/store";
import {ElMessage, ElMessageBox} from "element-plus";

const props = defineProps({
  isExpand: {
    type: Boolean,
    default: true,
    required: false
  },
  isMobile:{
    type: Boolean,
    default:false,
    required: false
  }
})


const emit = defineEmits(['update:isExpand']);

// 点击展开或缩放
const updateExpand = () => {
  if (props.isMobile){
    emit('update:isExpand', true);
  }else {
    // 触发事件，将修改后的数据返回给父组件
    emit('update:isExpand', !props.isExpand);
  }

};

const handleClick =(key , number , object) =>{
  if (key==="0"){
    logout()
  }
  console.log(key)
}
const logout= async() => {
  ElMessageBox.confirm('是否退出账号？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    store.dispatch('LogOut').then(() => {
      location.href = '/index';
    })
    ElMessage.success("账号已退出!")
  }).catch(() => {});
}
</script>

<template>
  <div class="nav-bar nav-bar-height">
    <div class="nav-bar-left nav-bar-height">
      <el-button style="font-size: 24px;color:#303133;margin: 0 0 0 10px" link type="info"
                 :icon="isMobile ? Expand : isExpand ? Expand : Fold" size="large" @click="updateExpand"/>
    </div>
    <div class="nav-bar-right nav-bar-height">
      <el-dropdown trigger="click" @command="handleClick">
        <span class="el-dropdown-link">
          <el-avatar :size="28" :src="store.getters.avatar"/>
          <b>{{ store.getters.username }}</b>
          <el-icon class="el-icon--right">
            <arrow-down/>
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="0" style="font-size: 13px" :icon="SwitchButton">退出账号</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<style scoped>
.nav-bar-height {
  height: 100%;
}

.nav-bar {
  width: 100%;
  display: flex;
  justify-content: space-around;
  justify-items: center;
}

.nav-bar-left {
  flex: 1;
  line-height: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
}

.nav-bar-right {
  flex: 1;
  line-height: 100%;
  display: flex;
  justify-content: right;
  align-items: center;
  margin-right: 10px;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  border: none !important;
  outline: none;
}

.el-dropdown-link b {
  font-size: 18px;
  margin-left: 8px;
  user-select: none;
}

.el-dropdown {
  border: none !important;
  outline: none;

}
</style>